<template>
    <el-dialog v-model="visible" title="高级筛选" width="500" draggable overflow append-to-body>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                和值走势线趋势：
                <el-tooltip placement="top">
                    <template #content>
                        <strong>和值走势线</strong><br />
                        根据和值走势图的趋势，预测下一期的走势趋势。
                    </template>
                    <el-icon class="ml-2">
                        <question-filled />
                    </el-icon>
                </el-tooltip>
            </label>
            <div>
                <el-select size="small" v-model="formData.trend" clearable>
                    <el-option label="无" value=""></el-option>
                    <el-option label="向上" value="上"></el-option>
                    <el-option label="持平" value="平"></el-option>
                    <el-option label="向下" value="下"></el-option>
                </el-select>
            </div>
        </div>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                和值范围：
                <el-tooltip placement="top">
                    <template #content>
                        <strong>和值范围法</strong><br />
                        根据和值走势图的趋势，预测下一期的和值范围。
                    </template>
                    <el-icon class="ml-2">
                        <question-filled />
                    </el-icon>
                </el-tooltip>
            </label>
            <div>
                <el-slider size="small" v-model="formData.sumRange" range :max="60" show-tooltip :show-stops="false" />
            </div>
        </div>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                前区范围：
                <el-tooltip placement="top">
                    <template #content>
                        <strong>起止范围法</strong><br />
                        预测下一期开奖号码的首号码和末号码的位置。
                    </template>
                    <el-icon class="ml-2">
                        <question-filled />
                    </el-icon>
                </el-tooltip>
            </label>
            <div>
                <el-slider size="small" v-model="formData.frontRange" range :max="60" />
            </div>
        </div>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                后区范围：
            </label>
            <div>
                <el-slider size="small" v-model="formData.backRange" range :max="60" />
            </div>
        </div>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                前区包含号码：
                <el-tooltip placement="top">
                    <template
                        #content><strong>号码添加法</strong><br />返回主界面的【开奖号码表】，对47个号码逐一判断，预测下一期开奖号码中开奖率比较高的号码。</template>
                    <el-icon class="ml-2">
                        <question-filled />
                    </el-icon>
                </el-tooltip>
            </label>
            <div>
                <el-input v-model="formData.frontIncludes" size="small" placeholder="号码之间以空格隔开" clearable
                    class="w-full"></el-input>
            </div>
        </div>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                前区排除号码：
                <el-tooltip placement="top">
                    <template #content>
                        <strong>号码排除法</strong><br />
                        预测下一期开奖号码中开奖率比较低的号码。
                    </template>
                    <el-icon class="ml-2">
                        <question-filled />
                    </el-icon>
                </el-tooltip>
            </label>
            <div>
                <el-input v-model="formData.frontExcludes" size="small" placeholder="号码之间以空格隔开" clearable
                    class="w-full"></el-input>
            </div>
        </div>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                后区包含号码：
            </label>
            <div>
                <el-input v-model="formData.backIncludes" size="small" placeholder="号码之间以空格隔开" clearable
                    class="w-full"></el-input>
            </div>
        </div>
        <div class="mt-1 text-xs">
            <label class="flex items-center">
                后区排除号码：
            </label>
            <div>
                <el-input v-model="formData.backExcludes" size="small" placeholder="号码之间以空格隔开" clearable
                    class="w-full"></el-input>
            </div>
        </div>
        <template #footer>
            <el-button-group size="small">
                <el-button type="danger" @click="onResetAnalysisData">清空</el-button>
                <el-button type="info" @click="visible = false">关闭</el-button>
            </el-button-group>
        </template>
    </el-dialog>
</template>

<script setup>
/**
 * 数据分析操作面板对话框
 */
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { copyText } from '@/utils/Utils';

const cartCombinDialogInfo = ref({
    visible: false,
    data: [],
})

const cartMergeDialogInfo = ref({
    visible: false,
    data: [],
})

const importDialogInfo = ref({
    visible: false,
})

const rangeMarks = {
    0: '0',
    10: '10',
    20: '20',
    30: '30',
    40: '40',
    50: '50',
    60: '60',
    70: '70',
    80: '80',
    90: '90',
    100: '100',
};
const formData = ref({
    // 数据分析
    trend: '',
    sumRange: '',
    frontRange: '',
    backRange: '',
    frontIncludes: '',
    frontExcludes: '',
    backIncludes: '',
    backExcludes: '',
})

const visible = defineModel();

const sumRangeArr = ref([]);
const onSumRangeClick = () => {
    sumRangeArr.value = formData.value.sumRange.split('-');
}

const onResetAnalysisData = () => {
    ElMessageBox.confirm('确定要清空分析数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        formData.value = Object.assign(formData.value, {
            trend: '',
            sumRange: '0-0',
            frontRange: '',
            backRange: '',
            frontIncludes: '',
            frontExcludes: '',
            backIncludes: '',
            backExcludes: '',
            area1Count: 0,
            area2Count: 0,
            area3Count: 0,
            area4Count: 0,
            area5Count: 0,
            area6Count: 0,
            area7Count: 0,
        });
    })
}
const onCopyAnalysisData = () => {
    let text = `"sumRange":"${formData.value.sumRange}", // 和值范围
"trend": "${formData.value.trend}", // 走势
"frontRange": "${formData.value.frontRange}", // 前区范围
"backRange": "${formData.value.backRange}", // 后区范围
"frontIncludes": "${formData.value.frontIncludes}", // 前区包含号码
"frontExcludes": "${formData.value.frontExcludes}", // 前区排除号码
"backIncludes": "${formData.value.backIncludes}", // 后区包含号码
"backExcludes": "${formData.value.backExcludes}", // 后区排除号码`;
    // 区域分布：1区 ${formData.value.area1Count}个 / 2区 ${formData.value.area2Count}个 / 3区 ${formData.value.area3Count}个 / 4区 ${formData.value.area4Count}个 / 5区 ${formData.value.area5Count}个 / 6区 ${formData.value.area6Count}个 / 7区 ${formData.value.area7Count}个
    copyText(text);
    ElMessageBox.alert('复制成功');
}

const onFilte = (columns) => {
    columns.forEach((arr, i) => {
        formData.value.cart[i] = arr.join(' ');
    })
    cartCombinDialogInfo.value.data = columns;
    cartMergeDialogInfo.value.data = columns;
}

</script>